<template>
  <view>
    <up-loading-page
      :loading="true"
      loadingText="loading..."
      v-if="showLoading"
    ></up-loading-page>
  </view>
  <view class="layout" v-show="!showLoading">
    <!-- 组件 ,需要主页图片返回主页 加  ：isHome="true"-->
    <cu-custom :isBack="true" background="rgba(248, 248, 248, 0.2)">
      <block slot="content">积分商店</block>
    </cu-custom>
    <!-- 积分商城个人信息栏 -->
    <view class="personinfo">
      <!-- 头像左边 -->
      <view class="avtor">
        <image :src="avatar" mode=""></image>
      </view>

      <!-- 用户名字与￥ -->
      <view class="user-info">
        <!-- 名字 -->
        <view class="user-name">{{ nickname }}</view>
        <!-- 积分 -->
        <view class="user-get">积分：{{ user_integral }}</view>
      </view>

      <!-- 积分明细和积分订单 -->
      <navigator url="/pages/pointdetail/pointdetail" class="jifenmingxi">
        <!-- 图片 -->
        <view class="jifenimg">
          <image src="../../static/meiocn1.png" mode=""></image>
        </view>
        <!-- 文字 -->
        <view class="jifenzi"> 积分明细 </view>
      </navigator>

      <!-- 订单 -->
      <navigator url="/pages/my-order/my-order" class="icon-order">
        <!-- 图片 -->
        <view class="order-icon">
          <image src="../../static/newicon2.png" mode=""></image>
        </view>

        <!-- 子 -->
        <view class="order-zi">积分订单</view>
      </navigator>
    </view>

    <!-- 搜索框 -->
    <view class="search">
      <input
        style="
          width: 690rpx;
          height: 68rpx;
          text-indent: 30rpx;
          padding-left: 30rpx;
          font-size: 24rpx;
          background: #ffffff;
          border-radius: 30rpx;
        "
        type="text"
        placeholder="输入关键字搜索"
        v-model="keyword"
      />
      <button class="search-bt" @click="search">搜索</button>
    </view>

    <!-- 排序 -->
    <view class="desbox">
      <view class="destotle">综合</view>
      <view class="coindes" @click="sortByPrice">
        <view class="coindes-icon">
          <image src="../../static/decs.png" mode=""></image>
        </view>
        <view class="coindes-zi">积分</view>
      </view>
	  
    		<view class="select" @click="show = true">
    				<view class="select-zi">筛选</view>
    				<view class="select-icon">
    					<image src="../../static/select.png" mode=""></image>
    				</view>
    			</view>
    		</view>
    		<!-- 筛选 -->
    		<up-popup :show="show" @close="close" @open="open" mode="right">
    		            <view>
    		                <h3 style="margin: 100rpx 50rpx 0 50rpx;">按照价格范围筛选</h3>
    		            </view>
    					
    					<view @click="filterPrice(1, 100)" style="width: 300rpx;border: 1px solid red;line-height: 30rpx;
    					margin: 50rpx;border-radius: 20rpx;box-sizing: border-box;
    					padding: 10rpx 0 0 60rpx;
    					height: 50rpx;font-size: 30rpx;">范围1-100间</view>
    					
    					<!-- 区间2 -->
    					<view @click="filterPrice(100, 500)" style="width: 300rpx;border: 1px solid red;line-height: 30rpx;
    					margin: 50rpx;border-radius: 20rpx;box-sizing: border-box;
    					padding: 10rpx 0 0 60rpx;
    					height: 50rpx;font-size: 30rpx;">范围100-500间</view>
    					
    					<!-- 区间 3-->
    					<view @click="resetFilter" style="width: 300rpx;border: 1px solid red;line-height: 30rpx;
    					margin: 50rpx;border-radius: 20rpx;box-sizing: border-box;
    					padding: 10rpx 0 0 130rpx;
    					height: 50rpx;font-size: 30rpx;">重置</view>
    		</up-popup>


    <!-- 商品列表 -->
    <view class="goods-box-all">
      <navigator
        :url="`/pages/goodsdetail/goodsdetail?gid=`+item.id +`&name=`+item.name +`&price=` +item.integral" class="goods-nav"
        v-for="(item, index) in goods_list"
      >
        <!-- 上面的图片 -->
        <view class="goods-img">
          <image :src="item.image" mode=""></image>
        </view>
        <!-- 标题 -->
        <view class="goods-title">{{ item.name }}</view>

        <view class="goods-price">积分{{ item.integral }}</view>
      </navigator>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import request from "../../common/request";
import api from "../../common/apiService";

const { getUserIntegral, getGoodsList, searchGoods } = api;
// 加载动画
const showLoading = ref(true);

const user_money = ref(0);
const goods_count = ref(0);
const user_integral = ref(0);
const nickname = ref("");
const avatar = ref("../../static/avtor.png");
const goods_list = ref([]);

const keyword = ref("");
const filter = ref({
	minIntegral: "",
	maxIntegral: "",
	sort: "",
});
const showFilter = ref(false);
const minIntegral = ref("");
const maxIntegral = ref("");
const sortList = [
	{ name: "综合", value: "" },
	{ name: "积分从低到高", value: "asc" },
	{ name: "积分从高到低", value: "desc" },
];

onMounted(async () => {
  const uid = uni.getStorageSync("uid");
  try {
    const [userInfoData, goodsListData] = await Promise.all([
      getUserIntegral(uid),
      getGoodsList(),
    ]);
    const list = goodsListData?.list || [];
    user_integral.value = userInfoData.user_integral;
    user_money.value = userInfoData.user_money;
    nickname.value = userInfoData.nickname;
    goods_list.value = list;
  } catch (error) {
    uni.showToast({
      title: error.message || "请求失败，请稍后再试",
      icon: "none",
    });
  } finally {
    showLoading.value = false;
  }
});

const search = async () => {
  try {
    const data = await searchGoods(keyword.value);
    goods_list.value = data.list;
  } catch (error) {
    uni.showToast({
      title: error.message || "请求失败，请稍后再试",
      icon: "none",
    });
  }
};
const filterGoods = () => {
	showFilter.value = !showFilter;
};
const resetFilter = () => {
	minIntegral.value = "";
	maxIntegral.value = "";
	filter.value = {
		minIntegral: "",
		maxIntegral: "",
		sort: "",
	};
};
const confirmFilter = async () => {
	const { minIntegral, maxIntegral, sort } = filter.value;
	const data = await getGoodsList({ minIntegral, maxIntegral, sort });
	goods_list.value = data.list;
	showFilter.value = false;
};
const selectSort = (item) => {
	filter.value.sort = item.value;
};

const sortOrder = ref("asc");
const sortByPrice = () => {
  goods_list.value.sort((a, b) => {
    return sortOrder.value === "asc"
      ? a.integral - b.integral
      : b.integral - a.integral;
  });

  // 切换排序顺序
  sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
};

const filterPrice = (min, max) => {
  goods_list.value = goods_list.value.filter(item => item.integral >= min && item.integral < max);
};



// 范围
const show = ref(false);  
  
// 定义方法  
function open() {  
  // 打开逻辑，比如设置 show 为 true  
  show.value = true;  
  // console.log('open');  
}  
  
function close() {  
  // 关闭逻辑，设置 show 为 false  
  show.value = false;  
  // console.log('close');  
}  






</script>

<style scoped lang="scss">
.layout {
  background: #fafafa;

  .personinfo {
    background: #ffffff;
    width: 719rpx;
    height: 80rpx;
    // border: 1px solid red;
    margin: 0 auto;
    display: flex;

    // 头像
    .avtor {
      width: 80rpx;
      height: 80rpx;
      // border: 1px solid red;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    // 信息
    .user-info {
      margin: 0 0 0 24rpx;
      width: 200rpx;
      height: 80rpx;
      // border: 1px solid red;

      .user-name {
        width: 200rpx;
        height: 29rpx;
        line-height: 29rpx;
        // border: 1px solid red;
        margin: 10rpx 0 0 0;
        font-weight: 800;
        font-size: 30rpx;
        color: #000000;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      // 积分信息
      .user-get {
        width: 200rpx;
        height: 23rpx;
        // border: 1px solid red;
        line-height: 23rpx;
        color: #ff551a;
        font-weight: 500;
        font-size: 24rpx;
        margin: 16rpx 0 0 0;
      }
    }

    // 积分明细
    .jifenmingxi {
      width: 160rpx;
      height: 23rpx;
      line-height: 23rpx;
      // border: 1px solid red;
      margin: 50rpx 0 0 100rpx;
      display: flex;

      .jifenimg {
        width: 26rpx;
        height: 23rpx;
        line-height: 23rpx;
        // border: 1px solid red;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .jifenzi {
        width: 130rpx;
        height: 23rpx;
        // border: 1px solid red;
        line-height: 23rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #333333;
        padding-left: 9rpx;
      }
    }

    .icon-order {
      width: 160rpx;
      height: 26rpx;
      line-height: 26rpx;
      // border: 1px solid red;
      margin: 48rpx 0 0 0;
      display: flex;

      // 图片
      .order-icon {
        width: 26rpx;
        height: 26rpx;
        line-height: 26rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .order-zi {
        width: 130rpx;
        height: 26rpx;
        // border: 1px solid red;
        line-height: 26rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #333333;
        padding-left: 9rpx;
      }
    }
  }

  .search {
    width: 690rpx;
    height: 68rpx;
    // border: 1px solid red;
    margin: 32rpx 30rpx 35rpx 30rpx;
    display: flex;
    // display: inline-block;
    position: relative;

    .search-bt {
      width: 123rpx;
      height: 57rpx;
      right: 0;
      // border: 1px solid #efefef;
      margin: 6rpx 7rpx 5rpx 0;
      line-height: 57rpx;
      color: #efefef;
      background: #5fd4f5;
      border-radius: 30rpx;
      // padding: 10rpx;
      position: absolute;
      font-size: 24rpx;
      z-index: 100;
    }
  }







  // 排序部分
  .desbox {
    width: 750rpx;
    height: 104rpx;
    line-height: 104rpx;
    // border: 1px solid red;
    background: #ffffff;
    display: flex;

    .destotle {
      width: 60rpx;
      height: 26rpx;
      line-height: 26rpx;
      font-size: 28rpx;
      margin: 39rpx 0 39rpx 32rpx;
      font-weight: 500;
    }

    // 排序
    .coindes {
      width: 108rpx;
      height: 26rpx;
      line-height: 26rpx;
      font-size: 28rpx;
      font-weight: 500;
      margin: 39rpx 0 39rpx 70rpx;
      // border: 1px solid red;
      display: flex;

      .coindes-icon {
        width: 20rpx;
        height: 26rpx;
        line-height: 26rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      // 积分字
      .coindes-zi {
        width: 88rpx;
        height: 26rpx;
        line-height: 26rpx;
        font-size: 28rpx;
        padding-left: 10rpx;
      }
    }

    // 范围
    .select {
      width: 108rpx;
      height: 26rpx;
      line-height: 26rpx;
      // border: 1px solid red;
      margin: 39rpx 0 39rpx 300rpx;
      display: flex;

      .select-zi {
        width: 88rpx;
        height: 26rpx;
        line-height: 26rpx;
        font-size: 28rpx;
        padding-left: 20rpx;
      }

      .select-icon {
        width: 20rpx;
        height: 26rpx;
        line-height: 26rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 商品列表
  .goods-box-all {
    width: 719rpx;
    height: auto;
    margin: 33rpx 16rpx 0 16rpx;
    // border: 1px solid red;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 一行三个盒子，每个盒子宽190rpx */
    grid-gap: 19rpx;
    /* 盒子之间的间距 */

    .goods-nav {
      width: 350rpx;
      height: 506rpx;
      // border: 1px solid red;

      .goods-img {
        width: 350rpx;
        height: 350rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      // 标题
      .goods-title {
        width: 308rpx;
        height: 56rpx;
        // line-height: 56rpx;
        font-size: 26rpx;
        // border: 1px solid red;
        margin: 25rpx 15rpx 15rpx 26rpx;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        line-height: 28rpx;
        max-height: 56rpx;
      }

      .goods-price {
        width: 308rpx;
        height: 25rpx;
        color: #ff551a;
        margin: 0 0 0 21rpx;
      }
    }
  }
}
</style>